@use "sass:map";
@use 'sass:color';

.CSS_START_partials_variables {
  display: none;
}

// GLOBAL COLORS

$color-white-1: #fff;
$color-white-2: #d9d9d9;
$color-black-1: #2D2D2D;
$color-black-2: #1E1E1E;
$color-grey-1: #61646B;
$color-grey-2: #7c7d86;

// THORIUM SET OF COLORS 

$thorium-theme-neutral-light: $color-white-1;
$thorium-theme-neutral-dark: #1D1D1E;
$thorium-theme-primary-light: #1053C8;
$thorium-theme-primary-dark: #99A9E3;
$thorium-theme-secondary-light: #ECF2FD;
$thorium-theme-secondary-dark: $color-black-1;
$thorium-theme-border-light: #afb1b6;
$thorium-theme-border-dark: #48484b;
$thorium-theme-background-light: #f5f5f5;
$thorium-theme-background-dark: #27272a;
$thorium-theme-appName-light: $thorium-theme-border-light;
$thorium-theme-appName-dark: #EAEAEA;
$thorium-theme-scrollbar-thumb: $color-grey-2;
$thorium-theme-button-hover-light: $color-white-1;
$thorium-theme-button-hover-dark: #48484b;
$thorium-theme-buttons-border-light: #1053C8;
$thorium-theme-buttons-border-dark: #99A9E3;


// CUSTOM SET OF COLORS (DEFAULT TO THORIUM)

$theme-neutral-light: var(--theme-neutral_light, $thorium-theme-neutral-light);
$theme-neutral-dark: var(--theme-neutral_dark, $thorium-theme-neutral-dark);
$theme-main-primary-light: var(--theme-primary_light, $thorium-theme-primary-light);
$theme-main-primary-dark: var(--theme-primary_dark, $thorium-theme-primary-dark);
$theme-main-secondary-light: var(--theme-secondary_light, $thorium-theme-secondary-light);
$theme-main-secondary-dark: var(--theme-secondary_dark, $thorium-theme-secondary-dark);
$theme-border-light: var(--theme-border_light, $thorium-theme-border-light);
$theme-border-dark: var(--theme-border_dark, $thorium-theme-border-dark);
$theme-background-light: var(--theme-background_light, $thorium-theme-background-light);
$theme-background-dark: var(--theme-background_dark, $thorium-theme-background-dark);
$theme-appName-light: var(--theme-appName_light, $thorium-theme-appName-light);
$theme-appName-dark: var(--theme-appName_dark, $thorium-theme-appName-dark);
$theme-scrollbar-thumb-light: var(--theme-scrollbarThumb_light, $thorium-theme-scrollbar-thumb);
$theme-scrollbar-thumb-dark: var(--theme-scrollbarThumb_dark, $thorium-theme-scrollbar-thumb);
$theme-button-hover-light: var(--theme-neutral_light, $thorium-theme-button-hover-light);
$theme-button-hover-dark: var(--theme-neutral_dark, $thorium-theme-button-hover-dark);
$theme-buttons-border-light: var(--theme-buttonsBorder_light, $thorium-theme-buttons-border-light);
$theme-buttons-border-dark: var(--theme-buttonsBorder_dark, $thorium-theme-buttons-border-dark);

// FINAL VARIABLES PALETTE

$color-palette: (
  light: (
    // ===== MAIN ===== //
    --color-text-primary: #4d4d4d,
    --color-text-reader: #000,
    --color-neutral-base: $theme-neutral-light,
    --color-brand-primary: $theme-main-primary-light,
    --color-brand-primary-inverse: $theme-main-primary-light,
    --color-brand-secondary: $theme-main-secondary-light,

    // ===== GREY ===== //
    --color-gray-50: $theme-background-light,
    --color-gray-100: color.adjust($thorium-theme-background-light, $lightness: -5%),
    --color-gray-200: $color-white-2,
    --color-gray-250: $color-white-2,
    --color-gray-275: $color-white-2,
    --color-gray-300: $theme-border-light,
    --color-gray-400: $color-grey-1,
    --color-gray-800: $color-black-1,
    --color-gray-850: $color-black-1,
    --color-gray-900: $color-black-2,
    --color-gray-950: $color-black-2,

    // ===== STATE ===== //
    --color-disabled: $color-grey-1,
    --color-error-text: #D52A54,
    --color-error-bg: #FCEEF1,
    --color-success-text: #0B8454,
    --color-success-bg: #ECFEF7,

    // ===== COMPONENTS ===== //
    --color-appName: $theme-appName-light,
    --color-scrollbar-thumb: $theme-scrollbar_thumb_light,

    // ===== ANNOTATIONS ===== //
    --color-annotation-text: #f5f5f5,
    --color-annotation-textarea: $color-white-1,
    --color-annotation-bg: $color-white-1,

    // ===== BUTTONS ===== //
    --color-button-hover: $theme-button-hover-light,
    --color-button-border: $theme-buttons-border-light,

    // ===== HEADER ===== //
    --color-header-docked: #f5f5f5,
  ),
  dark: (
    // ===== MAIN ===== //
    --color-text-primary: #e7eaf8,
    --color-text-reader: #000,
    --color-neutral-base: $theme-neutral-dark,
    --color-brand-primary: $theme-main-primary-dark,
    --color-brand-primary-inverse: $color-white-1,
    --color-brand-secondary: $theme-main-secondary-dark,

    // ===== GREY ===== //
    --color-gray-50: $theme-background-dark,
    --color-gray-100: color.adjust($thorium-theme-background-dark, $lightness: 5%),
    --color-gray-200: color.adjust($color-grey-1, $lightness: 25%),
    --color-gray-250: $color-grey-2,
    --color-gray-275: #454547,
    --color-gray-300: $theme-border-dark,
    --color-gray-400: $color-grey-2,
    --color-gray-800: $color-black-1,
    --color-gray-850: $color-white-2,
    --color-gray-900: $color-black-2,
    --color-gray-950: $color-grey-2,

    //  ===== STATE ===== //
    --color-disabled: #a7a9b3,
    --color-error-bg: #4f1d1d,
    --color-error-text: #F590A9,
    --color-success-bg: #121d19,
    --color-success-text: #303936,

    //  ===== COMPONENTS ===== //
    --color-app-name: $theme-appName-dark,
    --color-scrollbar-thumb: $theme-scrollbar_thumb_dark,

    // ===== ANNOTATIONS ===== //
    --color-annotation-text: #3b3c3f,
    --color-annotation-textarea: #3b3c3f,
    --color-annotation-background: $color-black-1,

    // ===== BUTTONS ===== //
    --color-button-hover: $theme-button-hover-dark,
    --color-button-border: $theme-buttons-border-dark,

    // ===== HEADER ===== //
    --color-header-docked: #121212,

  /*
    --color-text-primary: #fff,
    --color-neutral-base: #4d4d4d,
    --color-tertiary: #67a3e0,
    --color-disabled: #b7b7b7,
    --color-gray-300: #f1f1f1,
    --color-gray-400: #e5e5e5,
    --color-text-reader: #fff,
    --color-brand-primary: rgba(16, 83, 200, 1),
    --color-brand-secondary: rgba(236, 242, 253, 1),
    --color-bg-tab: rgba(16, 18, 22, 0.6),
    --setting-btn-primary: #fff,
    --setting-btn-secondary: var(--color-neutral-base),
        */
  ),
);

@function color($color, $value) {
  @return map.get(map.get($color-palette, $color), $value);
}

@media (prefers-color-scheme: light) {
  :root {
    // color-scheme: light;
    /* Colors */
    @each $key, $value in map.get($color-palette, light) {
      #{$key}: color(light, #{$key});
    }
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    // color-scheme: dark;
    /* Colors */
    @each $key, $value in map.get($color-palette, dark) {
      #{$key}: color(dark, #{$key});
    }
  }
}

[data-theme="light"] {
  // :root {
    // color-scheme: light;
  // }

  /* Colors */
  @each $key, $value in map.get($color-palette, light) {
    #{$key}: color(light, #{$key});
  }
}

[data-theme="dark"] {
  // :root {
    // color-scheme: dark;
  // }

  /* Colors */
  @each $key, $value in map.get($color-palette, dark) {
    #{$key}: color(dark, #{$key});
  }
}

.CSS_END_partials_variables {
  display: none;
}